'use client';

import { Button, Card, ConfigProvider, Tabs, Tag, Typography, Layout, Menu, Avatar, Badge } from 'antd';
import Image from 'next/image';
import Link from 'next/link';
import { UserOutlined, BellOutlined, LogoutOutlined, RobotOutlined, TeamOutlined, NotificationOutlined } from '@ant-design/icons';

const { Header, Content } = Layout;
const { Text } = Typography;

// 模拟API通道数据
const channels = [
  {
    id: '8812b7gq',
    type: 'Mini',
    tags: ['Auto', 'Plus', 'Team'],
    name: '优选账号',
    status: 'active',
  },
  {
    id: 'BhzLGiR0MA',
    type: 'Plus',
    name: '高级通道',
    status: 'active',
  },
  {
    id: 'lz1oS3FsWz',
    type: 'Free',
    name: '免费通道',
    status: 'active',
  },
  {
    id: '66x1e3rX7O',
    type: 'Mini',
    name: '基础通道',
    status: 'active',
  },
  {
    id: 'Om5pJdHOGf',
    type: 'Free',
    name: '测试通道',
    status: 'active',
  },
];

export default function HomePage() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#4C6FFF',
          borderRadius: 12,
          fontSize: 16,
          controlHeight: 40,
        },
      }}
    >
      <Layout style={{ minHeight: '100vh' }}>
        <Header style={{ 
          background: '#fff', 
          padding: '0 48px',
          height: '80px',
          display: 'flex',
          alignItems: 'center',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <div style={{ 
            display: 'flex', 
            alignItems: 'center',
            gap: '64px',
            flex: 1
          }}>
            {/* Logo */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
              <Image
                src="/cat-logo.png"
                alt="NeuroForge Logo"
                width={40}
                height={40}
                priority
                style={{ height: 'auto' }}
              />
              <Text strong style={{ fontSize: '24px', color: '#1a1a1a' }}>NeuroForge</Text>
            </div>

            {/* Navigation */}
            <Menu
              mode="horizontal"
              defaultSelectedKeys={['home']}
              style={{ 
                flex: 1,
                border: 'none',
                backgroundColor: 'transparent',
                fontSize: '16px'
              }}
              items={[
                { key: 'home', label: '首页' },
                { key: 'announcement', label: '公告' },
              ]}
            />

            {/* User Section */}
            <div style={{ 
              display: 'flex', 
              alignItems: 'center',
              gap: '32px'
            }}>
              <Badge dot>
                <BellOutlined style={{ fontSize: '24px', color: '#666' }} />
              </Badge>
              <Avatar size={40} icon={<UserOutlined />} />
            </div>
          </div>
        </Header>

        <Content style={{ padding: '32px', backgroundColor: '#f5f7ff' }}>
          {/* User Info Card */}
          <Card
            style={{ 
              marginBottom: '32px',
              borderRadius: '20px',
              boxShadow: '0 4px 24px rgba(76, 111, 255, 0.1)'
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: '24px', padding: '8px' }}>
              <Avatar size={64} icon={<UserOutlined />} />
              <div>
                <Text style={{ fontSize: '20px', fontWeight: 600 }}>深夜好，test</Text>
                <div style={{ marginTop: '8px' }}>
                  <Text type="secondary" style={{ fontSize: '16px' }}>邮箱：test@gmail.com</Text>
                  <Text type="secondary" style={{ marginLeft: '32px', fontSize: '16px' }}>
                    剩余时间：48天10时39分
                  </Text>
                </div>
              </div>
              <div style={{ marginLeft: 'auto' }}>
                <Button type="primary" size="large" style={{ marginRight: '16px', height: '44px', padding: '0 24px' }}>
                  <RobotOutlined /> 免费会员
                </Button>
                <Button size="large" style={{ height: '44px', padding: '0 24px' }}>
                  <LogoutOutlined /> 退出登录
                </Button>
              </div>
            </div>
          </Card>

          {/* Channels Section */}
          <Card
            style={{ 
              borderRadius: '20px',
              boxShadow: '0 4px 24px rgba(76, 111, 255, 0.1)'
            }}
          >
            <Tabs
              defaultActiveKey="mini"
              size="large"
              style={{
                fontSize: '16px'
              }}
              items={[
                {
                  key: 'mini',
                  label: (
                    <span style={{ fontSize: '16px', padding: '0 8px' }}>
                      <RobotOutlined /> Mini频道
                    </span>
                  ),
                  children: (
                    <div style={{ 
                      display: 'grid', 
                      gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))',
                      gap: '24px',
                      padding: '24px 0'
                    }}>
                      {channels.map(channel => (
                        <Card
                          key={channel.id}
                          size="small"
                          style={{ 
                            borderRadius: '16px',
                            border: '1px solid #f0f2f7',
                            padding: '16px'
                          }}
                        >
                          <div style={{ 
                            display: 'flex', 
                            alignItems: 'center',
                            marginBottom: '16px'
                          }}>
                            {channel.tags?.map(tag => (
                              <Tag
                                key={tag}
                                color={
                                  tag === 'Auto' ? 'green' :
                                  tag === 'Plus' ? 'blue' :
                                  tag === 'Team' ? 'purple' : 
                                  'default'
                                }
                                style={{ 
                                  marginRight: '8px',
                                  padding: '4px 12px',
                                  fontSize: '14px',
                                  borderRadius: '6px'
                                }}
                              >
                                {tag}
                              </Tag>
                            ))}
                            <Text strong style={{ marginLeft: 'auto', fontSize: '16px' }}>
                              {channel.id}
                            </Text>
                          </div>
                          <div style={{ 
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center'
                          }}>
                            <Text type="secondary" style={{ fontSize: '16px' }}>实时状态：</Text>
                            <Tag 
                              color="success" 
                              style={{ 
                                padding: '4px 12px',
                                fontSize: '14px',
                                borderRadius: '6px'
                              }}
                            >
                              空闲-推荐
                            </Tag>
                          </div>
                        </Card>
                      ))}
                    </div>
                  ),
                },
                {
                  key: 'plus',
                  label: (
                    <span style={{ fontSize: '16px', padding: '0 8px' }}>
                      <TeamOutlined /> Plus频道
                    </span>
                  ),
                  children: null,
                },
                {
                  key: 'claude',
                  label: (
                    <span style={{ fontSize: '16px', padding: '0 8px' }}>
                      <NotificationOutlined /> Claude频道
                    </span>
                  ),
                  children: null,
                },
              ]}
            />
          </Card>
        </Content>
      </Layout>
    </ConfigProvider>
  );
}
